<template>
    <div>
        <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
                <div @dblclick="showAddDialog(data.day)">
                    <div style="padding-top: 8px; text-align: center">
                        {{ data.day.split('-').slice(2).join() }}
                    </div>
                    <div v-if="calendarData[data.day]">
                        <div
                            :style="{
                                background:
                                    item.color === '#409eff'
                                        ? '#b3d8ff'
                                        : item.color === '#f56c6c'
                                        ? '#fbc4c4'
                                        : item.color === '#67c23a'
                                        ? '#c2e7b0'
                                        : '#f5dab1',
                                width: '100%',
                                color: '#000',
                                'margin-bottom': '4px',
                                'line-height': '24px',
                                'font-size': '12px',
                                'padding-left': '5px',
                                'border-left': '3px solid ' + item.color,
                                'box-sizing': 'border-box'
                            }"
                            @click.stop="showEditDialog(item, index)"
                            v-for="(item, index) in calendarData[data.day]"
                            :key="index"
                        >
                            {{ item.title }}
                        </div>
                    </div>
                </div>
            </template>
        </el-calendar>
        <!--新增界面-->
        <el-dialog
            title="新增日程"
            width="550px"
            :visible.sync="addFormVisible"
            :close-on-click-modal="false"
            append-to-body
        >
            <el-form :model="addForm" label-width="60px" :rules="rules" ref="addForm">
                <el-form-item label="标题" prop="title">
                    <el-input v-model.trim="addForm.title" clearable placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="颜色" prop="color">
                    <el-select v-model="addForm.color" placeholder="请选择颜色">
                        <el-option label="#409eff" value="#409eff">
                            <span
                                style="float: left; background: #409eff; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                        <el-option label="#f56c6c" value="#f56c6c">
                            <span
                                style="float: left; background: #f56c6c; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                        <el-option label="#67c23a" value="#67c23a">
                            <span
                                style="float: left; background: #67c23a; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                        <el-option label="#e6a23c" value="#e6a23c">
                            <span
                                style="float: left; background: #e6a23c; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit">提交</el-button>
            </div>
        </el-dialog>
        <!--编辑界面-->
        <el-dialog
            title="编辑日程"
            width="550px"
            :visible.sync="editFormVisible"
            :close-on-click-modal="false"
            append-to-body
        >
            <el-form :model="editForm" label-width="60px" :rules="rules" ref="editForm">
                <el-form-item label="标题" prop="title">
                    <el-input v-model.trim="editForm.title" clearable placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="颜色" prop="color">
                    <el-select v-model="editForm.color" placeholder="请选择颜色">
                        <el-option label="#409eff" value="#409eff">
                            <span
                                style="float: left; background: #409eff; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                        <el-option label="#f56c6c" value="#f56c6c">
                            <span
                                style="float: left; background: #f56c6c; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                        <el-option label="#67c23a" value="#67c23a">
                            <span
                                style="float: left; background: #67c23a; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                        <el-option label="#e6a23c" value="#e6a23c">
                            <span
                                style="float: left; background: #e6a23c; width: 30px; height: 30px; border-radius: 3px"
                            ></span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取消</el-button>
                <el-button type="danger" @click="deleteSubmit">删除</el-button>
                <el-button type="primary" @click="editSubmit">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: new Date(),
            addFormVisible: false,
            addForm: {
                id: '',
                day: '',
                title: '',
                color: '#409eff'
            },
            editFormVisible: false,
            editForm: {
                index: -1,
                id: '',
                day: '',
                title: '',
                color: ''
            },
            rules: {
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                color: [{ required: true, message: '请选择颜色', trigger: 'change' }]
            },
            calendarData: {}
        }
    },
    watch: {
        value: {
            handler(newVal, oldVal) {
                if (newVal && oldVal) {
                    if (!(newVal.getFullYear() === oldVal.getFullYear() && newVal.getMonth() === oldVal.getMonth())) {
                        let month = newVal.getMonth() + 1
                        if (month < 10) {
                            month = '0' + month
                        }
                        this.queryByDate(newVal.getFullYear() + '-' + month)
                    }
                }
            },
            immediate: false,
            deep: true
        }
    },
    mounted() {
        let date = new Date()
        let month = date.getMonth() + 1
        if (month < 10) {
            month = '0' + month
        }
        this.queryByDate(date.getFullYear() + '-' + month)
    },
    methods: {
        async queryByDate(date) {
            let res = await this.$axios.get('calendar/queryByDate/' + date)
            if (res.data.code == 200) {
                this.calendarData = res.data.data
            }
        },
        showAddDialog(day) {
            this.addFormVisible = true
            if (this.$refs.addForm) {
                this.$refs.addForm.resetFields()
            }
            this.addForm.day = day
        },
        addSubmit() {
            this.$refs.addForm.validate(valid => {
                if (valid) {
                    this.$axios.post('calendar/insert', this.addForm).then(res => {
                        if (res.data.code == 200) {
                            let item = JSON.parse(JSON.stringify(this.addForm))
                            item.id = res.data.data
                            if (this.calendarData[this.addForm.day]) {
                                this.calendarData[this.addForm.day].push(item)
                            } else {
                                this.$set(this.calendarData, this.addForm.day, [item])
                            }
                            this.addFormVisible = false
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        },
        showEditDialog(row, index) {
            this.editForm = Object.assign({}, row)
            this.editFormVisible = true
            if (this.$refs.editForm) {
                this.$refs.editForm.resetFields()
            }
            this.editForm.index = index
        },
        editSubmit() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.$axios.post('calendar/update', this.editForm).then(res => {
                        if (res.data.code == 200) {
                            this.calendarData[this.editForm.day].splice(
                                this.editForm.index,
                                1,
                                JSON.parse(JSON.stringify(this.editForm))
                            )
                            this.editFormVisible = false
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                }
            })
        },
        deleteSubmit() {
            this.$axios.post('calendar/delete/' + this.editForm.id, {}).then(res => {
                if (res.data.code == 200) {
                    this.calendarData[this.editForm.day].splice(this.editForm.index, 1)
                    this.editFormVisible = false
                } else {
                    this.$message.error(res.data.message)
                }
            })
        }
    }
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-calendar__body {
    padding: 0px;
}
::v-deep .el-calendar-day {
    min-height: 91px;
    height: auto;
    padding: 0px;
}
</style>
